<!--无需审核的聚会，立即展示成功页面和群二维码，或者报名成功，请等待团长上传群二维码-->
<template>
    <f7-page no-toolbar>
        <f7-navbar title="报名成功" back-link="Back"></f7-navbar>
        <f7-block>感谢您的参与，祝您聚会开心！</f7-block>
        <f7-block style="color: var(--f7-block-title-text-color)">
            <p>温馨提示：入群后请给[聚聚团长]支付相关费用</p>
            <!--如暂无二维码-->
            <p>如无微信群二维码，请等待{聚聚团长]上传群二维码后，在[我的][已参与]查看</p>
            <!--else 微信群二维码展示-->
            <p>建议先截图二维码 -> 微信扫一扫 -> 入群</p>
        </f7-block>

        <f7-block>
            <img style="width:100%;"
                 src="http://img2.imgtn.bdimg.com/it/u=2097124721,3074829049&fm=26&gp=0.jpg">
        </f7-block>

        <f7-block style="color: var(--f7-block-title-text-color);line-height: 10px;">
            <p>1.注意事项：请遵守组织者相关约定</p>
            <p>2.请勿迟到</p>
        </f7-block>

        <f7-list style="text-align: center;width: 90%;margin-left: 5%;">
            <f7-button fill round text="返回" @click="$f7router.back()"></f7-button>
        </f7-list>
    </f7-page>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        data() {
            return {
                imgs: []
            }
        },
        computed: {
            ...mapState({
                imgStatus: state => state.imgstore.img_status,
                imgPaths: state => state.imgstore.img_paths
            })
        },
        methods: {
            upload() {
                this.$store.commit('set_img_status', 'uploading')
            },
            submit() {
                let values = []
                for (let key of this.imgPaths) {
                    values.push(key)
                }
                this.imgs = values
                console.log(this.imgs)
            }
        },
        watch: {
            imgStatus() {
                if (this.imgStatus === 'finished') {
                    this.submit()
                }
            }
        },
        destoryed() {
            this.imgs = []
        }
    }
</script>

<style scoped lang="less">
    .btn {
        width: 100%;
        height: 3em;
        background-color: green;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
